<template>
    <div class="Box">
        <el-descriptions title="二级维护信息" :column="1">
            <el-descriptions-item label="车牌">{{ tableData?.licensePlate }}</el-descriptions-item>
            <el-descriptions-item label="车辆所属企业名称">{{ tableData?.companyName }}</el-descriptions-item>
            <el-descriptions-item label="二级维护维修企业">{{ tableData?.repairName }}</el-descriptions-item>
            <el-descriptions-item label="车辆进厂时间">{{ tableData?.repairDate }}</el-descriptions-item>
            <el-descriptions-item label="车辆竣工出厂时间">{{ tableData?.leaveDate }}</el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getSecondMatainRecordDetailApi } from '@/api/second'
import { useRoute } from 'vue-router';

const route = useRoute()
const tableData = ref(void 0)

onMounted(async () => {
    const data = {
        id: route.params.id
    }
    tableData.value = await getSecondMatainRecordDetailApi(data)
})
</script>

<style scoped>
.Box {
    width: 100%;
    height: 100%;
    padding: 20px;
}

.Box:deep(.el-descriptions__label)::after {
    content: ":";
}

.Box:deep(.el-descriptions__header) {
    border-bottom: 1px solid #4187f2;
}
</style>